<template>
  <!-- 注册页面的布局 -->
  <div class="register-container">

    <!-- 注册表单的容器 -->
    <div style="display: flex;
    background-color: rgba(245, 245, 245, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(200, 200, 200, 0.3);
    width: 50%; border-radius: 10px; overflow: hidden">

      <!-- 左侧图片 -->
      <div style="flex: 1; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center">
        <img src="@/assets/logo/register-logo.png" alt=""
             style="width: 100%; object-fit: contain; max-height: 100%">
      </div>

      <!-- 注册表单 -->
      <div style="display: flex; flex: 1; align-items: center; justify-content: center;">
        <el-form :model="user" :rules="rules" ref="registerRef"
                 style="width: 80%">
          <!-- 注册标题 -->
          <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px; margin-top: 20px">
            欢 迎 注 册
          </div>

          <!-- 输入框 -->
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号"
                      v-model="user.username" @keyup.enter.native="register()">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码"
                      v-model="user.password" @keyup.enter.native="register()">
            </el-input>
          </el-form-item>
          <el-form-item prop="confirm_pw">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请确认密码"
                      v-model="user.confirm_pw" >
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div style="display: flex;">
              <el-input prefix-icon="el-icon-check" size="medium" placeholder="请输入验证码"
                        v-model="user.code" @keyup.enter.native="register()"
                        style="flex: 1">
              </el-input>
              <!-- 验证码生成组件 -->
              <div style="flex: 1; height: 40px; background-color: white; margin-left: 10px">
                <valid-code @update:value="getCode" ref="validCodeRef"/></div>
            </div>
          </el-form-item>
          <el-form-item prop="role">
            <el-radio-group v-model="user.role">
              <el-radio label="学员"></el-radio>
              <el-radio label="教练"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button @click="register" type="primary" style="width: 100%; font-size: 17px">注 册</el-button>
          </el-form-item>
          <el-form-item>
            <div style="display: flex">
              <div style="flex: 1">已有账号？请
                <span @click="$router.push('/login')" style="color: #0f9876; cursor: pointer;"> 登 录</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script>
import ValidCode from "@/components/ValidCode.vue"; // 导入验证码组件

export default {
  name: "Register", // 组件名称为 register

  components: {
    ValidCode, // 注册验证码组件
  },

  data() {
    // 验证码校验函数，用于表单验证规则中
    const validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入验证码')) // 如果没有输入验证码，提示错误
      } else if (value !== this.code) {
        callback(new Error('验证码错误')) // 如果输入的验证码不正确，提示错误
      } else {
        callback() // 验证通过
      }
    }

    // 密码确认校验函数，用于表单验证规则中
    const validatePassword = (rule, confirm_pw, callback) => {
      if (!confirm_pw) {
        callback(new Error('请再次输入密码')) // 如果没有输入确认密码，提示错误
      } else if (confirm_pw !== this.user.password) {
        callback(new Error('两次输入的密码不一致')) // 如果两次输入的密码不一致，提示错误
      } else {
        callback() // 验证通过
      }
    }

    return {
      code: '', // 存储接收到的验证码
      user: {username: '', password: '', confirm_pw:''}, // 存储用户输入的账号、密码、确认密码和角色信息
      rules: { // 表单验证规则
        username: [{required: true, message: '请输入账号', trigger: 'blur'}], // 账号必填
        password: [{required: true, message: '请输入密码', trigger: 'blur'}], // 密码必填
        confirm_pw: [{validator: validatePassword, trigger: 'blur'}], // 确认密码需要验证
        code: [{validator: validateCode, trigger: 'blur'}], // 验证码需要验证
        role: [{required: true, message: '请选择角色', trigger: 'blur'}], // 角色必选
      },
    }
  },

  methods: {
    // 获取验证码的方法，当验证码组件更新时调用
    getCode(code) {
      console.log(code) // 打印接收到的验证码
      this.code = code.toLowerCase() // 将验证码转换为小写并存储
    },

    // 注册方法，处理注册逻辑
    register() {
      this.$refs['registerRef'].validate((valid) => { // 验证表单数据
        if (valid) {
          // 如果表单数据有效，发送注册请求
          this.$request.post('/register', this.user).then(res => {
            if (res.code === '200') { // 如果注册成功
              this.$router.push('/login') // 跳转到登录页面
              this.$message.success('注册成功') // 显示成功消息
            } else {
              this.$message.error(res.msg) // 如果注册失败，显示错误消息
            }
          })
        } else {
          this.$refs.validCodeRef.refreshCode() // 如果表单数据无效，刷新验证码
        }
      })
    },
  }
}
</script>


<style>
/* 注册表单毛玻璃 */
.register-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/bg/login.jpg') center/cover no-repeat;
  position: relative;
}

</style>